<template>
  <div class="book-list-content">
    <Row gutter="40">
      <Col :xs="12" :sm="8" :md="8" :lg="6" v-for="(item,index) in data" style="margin-top: 40px" :key="index">
        <Card style="width: 250px;margin: auto">
          <router-link :to="{ name: 'Document', params: { document_id: item.id }}">
            <div style="text-align:center">
              <Image width="210px" height="250px" style="border-radius: 4px" :src="item.cover_url">
                <template #error>
                  <img style="width: 210px;height: 250px;border-radius: 4px" src="../assets/books/book1.png">
                </template>
              </Image>

              <div style="height: 40px;margin-top: 5px">
                <h3 style="color: #515a6e">{{ item.title }}</h3>
              </div>
            </div>
          </router-link>
        </Card>
      </Col>
    </Row>
    <Spin size="large" fix :show="spinShow"></Spin>
  </div>
</template>

<script>
import { getList } from '../api/document'

export default {
  name: 'BookList',
  setup() {
  },
  data() {
    return {
      spinShow: true,
      page: 1,
      total: 15,
      data: []
    }
  },
  created() {
    this.getDocumentList()
  },
  mounted() {
    this.getDocumentList()
  },
  methods: {
    getDocumentList() {
      getList({ page: this.page }).then((res) => {
        this.data = res.data.list
        this.total = res.data.total

        // 保存书本是否需要验证到本地
        this.data.map((value) => {
          localStorage.setItem(`document_${value.id}`, value.need_auth ? value.need_auth : 0)
          return true
        })

        this.spinShow = false
      }).catch(() => {
        this.spinShow = false
      })
    },
  }
}
</script>

<style lang="less" scoped>
.book-list-content {
  width: 70%;
  margin: auto;
}
</style>
